<!-- subpkg_consult/medicine/timeline/index.vue -->
<script lang="ts" setup>
  import { getMedicalOrderLogistics } from '@/apis/order'
  import type { ExpressData } from '@/types/order'
  import { onMounted, onUnmounted, ref } from 'vue'
  import AMapLoader from '@amap/amap-jsapi-loader'
  // 1. 查询物流详情
  // 获取地址参数
  const pageParams = defineProps<{ id: string }>()
  // 当前位置
  const logisticsInfo = ref({} as ExpressData)
  let location: number[][] = []
  // 查看物流信息
  let currentLocationInfo = ref({
    latitude: 0,
    longitude: 0,
  } as any)
  const getLogistics = async () => {
    // 调用接口
    const data = await getMedicalOrderLogistics(pageParams.id)
    // 渲染数据
    logisticsInfo.value = data
    console.log(logisticsInfo.value.currentLocationInfo.latitude)

    location = logisticsInfo.value.logisticsInfo
      .map((item) => [parseFloat(item.longitude), parseFloat(item.latitude)])
      .reverse()
    loadMap()
  }
  /** 地图部分逻辑 */
  let map: any = null
  async function loadMap() {
    ;(window as any)._AMapSecurityConfig = {
      securityJsCode: '52be01eec2ca317a6f4c73055f51048a',
    }
    const AMap = await AMapLoader.load({
      key: '3d5d92672e7f763d848d950f42b912b0', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      // plugins: ['AMap.Scale'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
    map = new AMap.Map('container', {
      // 设置地图容器id
      viewMode: '3D', // 是否为3D地图模式
      zoom: 3, // 初始化地图级别
      center: [116.397428, 39.90923], // 初始化地图中心点位置
    })
    AMap.plugin('AMap.Driving', function () {
      var driving = new AMap.Driving({
        //驾车路线规划策略，0是速度优先的策略
        policy: 0,
        //map 指定将路线规划方案绘制到对应的 AMap.Map 对象上
        map: map,
        //panel 指定将结构化的路线详情数据显示的对应的 DOM 上，传入值需是 DOM 的 ID
        panel: false,
        showTraffic: false,
        hideMarkers: true,
      })
      // 创建一个 Icon
      var startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(30, 30),
        // 图标的取图地址
        image: '/static/images/start.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(30, 30),
        // 图标取图偏移量
        anchor: 'bottom-center',
      })

      // 将 icon 传入 marker
      var startMarker = new AMap.Marker({
        position: new AMap.LngLat(location[0][0], location[0][1]),
        icon: startIcon,
        offset: new AMap.Pixel(-13, -30),
      })

      // 创建一个 icon
      var endIcon = new AMap.Icon({
        size: new AMap.Size(30, 30),
        image: '/static/images/end.png',
        imageSize: new AMap.Size(30, 30),
        anchor: 'bottom-center',
      })

      // 将 icon 传入 marker
      var endMarker = new AMap.Marker({
        position: new AMap.LngLat(
          location[location.length - 1][0],
          location[location.length - 1][1]
        ),
        icon: endIcon,
        anchor: 'bottom-center',
      })

      var viaMarker = new AMap.Marker({
        position: new AMap.LngLat(
          logisticsInfo.value.currentLocationInfo.longitude,
          logisticsInfo.value.currentLocationInfo.latitude
        ),
        // 将一张图片的地址设置为 icon
        icon: '/static/images/car.png',
        // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
        anchor: 'bottom-center',
        offset: new AMap.Pixel(20, 15),
      })

      // 将 markers 添加到地图
      map.add([viaMarker, startMarker, endMarker])

      if (location.length > 0) {
        var startLngLat = location[0] //起始点坐标
        var endLngLat = location[location.length - 1] //终点坐标
        var opts = {
          waypoints: location.slice(1, location.length - 1), //途经点参数，最多支持传入16个途经点
        }
        //搜索完成后，将自动绘制路线到地图上
        driving.search(startLngLat, endLngLat, opts)

        setTimeout(() => {
          map.setFitView([viaMarker])
          map.setZoom(10)
        }, 3000)
      }
    })
  }
  onMounted(async () => {
    // loadMap()
    getLogistics()
  })

  onUnmounted(() => {
    map?.destroy()
  })
</script>

<template>
  <view class="timeline-page">
    <!-- 加载地图 -->
    <view id="container" class="uni-map"></view>
    <!--  end -->
    <cover-view class="timeline-meta">
      <cover-view class="status">{{ logisticsInfo.statusValue }}</cover-view>
      <cover-view class="extra">
        预计 {{ logisticsInfo.estimatedTime }} 送达
        {{ logisticsInfo.name }}
        {{ logisticsInfo.awbNo }}
      </cover-view>
    </cover-view>
    <view class="timeline-detail">
      <view class="title">物流详情</view>
      <view class="timeline">
        <view class="line">
          <view class="badge text">收</view>
          <view class="content"> 收货地址：广东省广州市大华区明离路科技园880号 </view>
        </view>
        <view v-for="item in logisticsInfo.list" :key="item.id" class="line">
          <!-- 1已发货 2已揽件 3 运输中 4 派送中 5已签收 -->
          <view class="badge dot" v-if="item.status <= 3"></view>
          <view class="badge icon" v-else-if="item.status === 4">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-truck" />
          </view>
          <view class="badge icon" v-else-if="item.status === 5">
            <uni-icons color="#2cb5a5" custom-prefix="iconfont" type="icon-checked" />
          </view>
          <view class="label">{{ item.statusValue }}</view>
          <view class="content">{{ item.content }}</view>
          <view class="time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
